<script setup lang="ts">
import type { User } from './types/user'
import { Button as VanButton } from 'vant'

import { useUserStore } from './stores'

import { request } from './utils/request'
const store = useUserStore()
const login = () => {
  request<User>('login/password', 'POST', {
    mobile: '13211112222',
    password: 'abc12345'
  })
    .then((res) => {
      console.log('成功', res.data.account)
    })
    .catch((err) => {
      console.log('失败', err)
    })
}
</script>

<template>
  <!-- 验证vant颜色被覆盖 -->
  {{ store.user }}

  <van-button
    type="primary"
    @click="
      store.setUser({
        id: '1',
        avatar: '1',
        token: '1',
        mobile: '1',
        account: '1'
      })
    "
    >登录</van-button
  >
  <van-button type="primary" @click="store.delUser()">退出</van-button>
  <van-button type="primary" @click="login()">连接</van-button>
</template>

<style scoped lang="scss">
// 使用 css 变量
a {
  color: var(--cp-primary);
}
</style>
